<template>
  <div>
    <!-- 头部区域 -->
    <div class="itemMusicTop">
      <img :src="playlist.coverImgUrl" class="bgimg" alt="" />
      <div class="itemLeft">
        <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
          <use xlink:href="#icon-zuojiantou1"></use>
        </svg>
        <span>歌单</span>
      </div>
      <div class="itemRight">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sousuo"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-31liebiao"></use>
        </svg>
      </div>
    </div>
    <!-- 中间信息区域 -->
    <div class="contentMusic">
      <!-- 左边部分 -->
      <div class="CM-left">
        <img class="logo" :src="playlist.coverImgUrl" alt="" />
        <div class="CM-play">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gl-play"></use>
          </svg>
          <span class="count">{{ countentPlay(playlist.playCount) }}</span>
        </div>
      </div>
      <!-- 右边部分 -->
      <div class="CM-right">
        <div class="title">{{ playlist.name }}</div>
        <div class="nickname">
          <img class="avater" :src="playlist.creator.avatarUrl" alt="" />
          <text>{{ playlist.creator.nickname }}</text>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-youjiantou"></use>
          </svg>
        </div>
        <div class="next">
          <div class="next-left">
            <p>{{ playlist.description }}</p>
          </div>
          <div class="next-right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-youjiantou"></use>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部区域 -->
    <div class="footer">
      <div class="iconItem">
        <svg class="Icon" aria-hidden="true">
          <use xlink:href="#icon-xiaoxi"></use>
        </svg>
        <span>{{playlist.commentCount}}</span>
      </div>
      <div class="iconItem">
        <svg class="Icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
        <span>{{playlist.shareCount}}</span>
      </div>
      <div class="iconItem">
        <svg class="Icon" aria-hidden="true">
          <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
        </svg>
        <span>下载</span>
      </div>
      <div class="iconItem">
        <svg class="Icon" aria-hidden="true">
          <use xlink:href="#icon-xuanze-duoxuan-tianchong"></use>
        </svg>
        <span>多选</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup(props) {
    // console.log(props);
    // 层级太深，而获取不到数据，通过本地存储的值将数据赋值给该页面的是属性值
    if ((props.playlist.creator = "")) {
      props.playlist.creator = JSON.parse(
        sessionStorage.getItem().playlist
      ).creator;
    }

    function countentPlay(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + "亿";
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + "万";
      }
    }
    return { countentPlay };
  },
  props: ["playlist"],
};
</script>

<style lang="less" scoped>
.itemMusicTop {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: .2rem;
  position: relative;
  .itemLeft,
  .itemRight {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0.2rem;
    span {
      font-size: 0.4rem;
      color: #fff;
    }
    .icon {
      fill: #fff; //填充颜色
    }
  }
  .bgimg {
    height: 11rem;
    width: 100%;
    position: fixed;
    z-index: -1;
    filter: blur(.6rem);
  }
}
.contentMusic {
  height: 3rem;
  width: 100%;
  padding: 0.2rem;
  // border: 1px solid red;
  margin-top: 0.4rem;
  display: flex;
  .CM-left {
    height: 100%;
    width: 33.3%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .logo {
      height: 2.6rem;
      width: 2.4rem;
      border-radius: 0.2rem;
    }
    .CM-play {
      position: absolute;
      right: 0.2rem;
      top: .1rem;
      .icon {
        width: 0.25rem;
        height: 0.25rem;
      }
      .count {
        color: white;
        font-size: 0.02rem;
      }
    }
  }
  .CM-right {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin-left: 0.2rem;
    .title {
      flex: 1;
      overflow: hidden;
      color: white;
      font-weight: 600;
    }
    .nickname {
      flex: 1;
      display: flex;
      align-items: center;
      color: #efefef;
      font-size: 0.28rem;
      margin-top: 0.16rem;
      .avater {
        height: 0.6rem;
        width: 0.6rem;
        border-radius: 100%;
        margin-right: 0.2rem;
      }
      .icon {
        fill: #efefef;
        width: 0.4rem;
        height: 0.4rem;
      }
    }
    .next {
      flex: 1;
      overflow: hidden;
      font-size: .1rem;
      color: #efefef;
      display: flex;
      justify-content: space-between;
      .next-left {
        width: 90%;
        box-sizing: content-box;
        padding-top: 0.16rem;
      }
      .next-right {
        width: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: content-box;
        padding-top: 0.1rem;
        .icon {
          fill: #efefef;
          //  height: .4rem;
        }
      }
    }
  }
}
.footer{
  height: 1.4rem;
  // border: 1px solid red;
  width: 100%;
  padding: 0 .2rem;
  display: flex;
  .iconItem{
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .Icon{
      width: .5rem;
      height: .5rem;
      fill:white;
      margin-bottom: .1rem;
    }
    span{
      color: white;
      font-size: .28rem;
    }
  }
}
</style>